<!DOCTYPE html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/picker-common.js"></script>
<style>
.font1 { font-family: TestFont; }
.font2 { font-family: "TestFont 2"; }
</style>
<select>
  <option>select</option>
  <option class="font1">font 1</option>
  <option class="font2">font 2</option>
</select>
<script>
var face1 = new FontFace("TestFont", "local(Arial), local(Arimo Regular)");
var face2 = new FontFace("TestFont 2", "local(Arial), local(Arimo Regular)");
document.fonts.add(face1);
document.fonts.add(face2);

async_test(function(test) {
    // Fonts are not loaded yet.
    assert_equals(face1.status, "unloaded", "face1 should be unloaded");
    assert_equals(face2.status, "unloaded", "face2 should be unloaded");

    openPicker(document.querySelector('select'), function() {
        document.fonts.ready.then(test.step_func(function() {
            assert_equals(face1.status, "loaded", "face1 should be loaded");
            assert_equals(face2.status, "loaded", "face2 should be loaded");
            test.done();
        }), 0);
    }, test.step_func(function() {
        // Do nothing on Mac and Android.
        test.done();
    }));
}, '<option> can be styled with web fonts');
</script>
</body>
